<template>
  <a-modal
    title="选择群组"
    width="500px"
    centered
    :visible="selectGroupVisible"
    :maskClosable="false"
    @ok="submitInform('form')"
    @cancel="close"
  >
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      v-bind="formLayout"
      class="inform-form"
      style="height:200px;"
    >
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="选择群组" prop="id">
            <a-select show-search v-model="form.id" :filter-option="filterOption">
              <a-select-option
                v-for="item in groupList"
                :value="item.id"
                :key="item.id"
              >{{item.unitName}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import {commonUser} from "@/api/commonUser";
export default {
  props: {
    selectGroupVisible: {
      type: Boolean,
      default: false
    },
    //关闭弹框
    closeFunc: {
      type: Function,
      default: () => {}
    },
    id: {
      type: String,
      default: ""
    },
    groupId:{
      type: String,
      default: ""
    }
  },
  data() {
    return {
      form: {
        id: "",
        nickName: ""
      },
      formLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 16 }
      },
      rules: {
        id: [
          { required: true, message: "请选择群组", trigger: "change" }
        ]
      },
      groupList: [

      ]
    };
  },
  watch: {
    selectGroupVisible(n) {
      if(n){
        this.getGroupList()
        this.form.id = this.groupId
      }
    }
  },
  mounted () {
    this.getGroupList();
    this.form.id = this.groupId
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    //获取群组下拉
    getGroupList(){
      commonUser
        .getGroupList(this.id)
        .then(res => {
          this.groupList = res.data.data
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //关闭弹框
    close() {
      this.$emit("closeFunc");
    },
    submitInform(formName) {
      //提交弹框表单
      this.loading = true;
      this.$refs[formName].validate(valid => {
        if (!valid) {
          this.loading = false;
          return false;
        }
        var params = {
          unitId:this.form.id,
          userId:this.id
        }
        commonUser.setUserUnit(params).then(res => {
          this.$message.destroy();
          this.$message.success(res.data.msg);
          this.$emit("updateUserGroup");
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
        });
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.user-product-content {
  max-height: 400px;
  overflow: hidden;
  overflow-y: auto;
  padding-top: 24px;
}
</style>